<template>
  <div>
    <van-nav-bar
      class="login-nav-bar"
      title="登录"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <van-form class="login-container" @submit="loginFn" ref="loginRef">
      <van-field
        v-model="user.mobile"
        name="mobile"
        placeholder="请输入手机号"
        :rules="formRules.mobile"
        maxlength="11"
      >
        <template v-slot:left-icon>
          <i class="toutiao toutiao-shouji"></i>
        </template>
      </van-field>

      <van-field
        v-model="user.code"
        name="code"
        placeholder="请输入验证码"
        :rules="formRules.code"
        maxlength="6"
      >
        <template v-slot:left-icon>
          <i class="toutiao toutiao-yanzhengma"></i>
        </template>
        <template #button>
          <van-count-down
            v-if="flag"
            :time="60000"
            format="ss 秒"
            @finish="flag = false"
          />

          <van-button
            v-else
            native-type="button"
            class="send-sms-btn"
            round size="small"
            type="default"
            @click="sendCode"
          >
            发送验证码
          </van-button>
        </template>
      </van-field>

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login, sendSms } from '@/api/user'

export default {
  data() {
    return {
      user: {
        mobile: '',
        code: ''
      },
      formRules: {
        mobile:[
          { required: true, message: '请填写手机号' },
          { pattern: /^1\d{10}$/, message: '请输入11位手机号' }
        ],
        code: [
          { required: true, message: '请填写验证码' },
          { pattern: /^\d{6}$/, message: '请输入6位验证码' }
        ]
      },
      flag: false
    }
  },
  methods: {
    async loginFn() {
      try {
        this.$toast.loading({
          message: '加载中...',
          duration: 0
        })

        const {data: {data}} = await login(this.user)

        this.$toast.success({
          message: '登陆成功',
          duration: 2000
        })

        // 调用 vuex的 setToken方法
        this.$store.commit('setToken', data)
        this.$router.go(-1)

      } catch(err) {
        this.$toast.fail({
          message: '登陆失败',
          duration: 2000
        })
      }
    },
    async sendCode() {
      try {
        await this.$refs.loginRef.validate('mobile')
      } catch(err) {
        return this.$toast.fail({
          message: '手机号格式不正确',
          duration: 1000
        })
      }

      this.flag = true

      try {
        this.$toast.success({
          message: '发送验证码成功',
          duration: 1000
        })
        const res = await sendSms(this.user.mobile)

        console.log(res)
      } catch(err) {
        this.$toast.fail({
          message: '获取验证码失败',
          duration: 1000
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar .van-icon {
  color: #fff;
}

.login-container {
  .toutiao {
    font-size: 37px;
  }
  .send-sms-btn {
    display: block;
    width: 162px;
    height: 46px;
    line-height: 46px;
    background-color: #ededed;
    font-size: 22px;
    color: #666;
  }
  .login-btn-wrap {
    padding: 53px 33px;
    .login-btn {
      background-color: #6db4fb;
      border: none;
    }
  }
}

.van-button--round {
  border-radius: 5px;
}
</style>
